<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D波浪</title>
    <style>
        body{
            background-color: #222;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: #222;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
        }

        .son {
            width: 40px;
            height: 40px;
            background-color: #222;
            float: left;
            animation: move 3s infinite alternate;
        }

        @keyframes move {
            0% {
                transform: translateZ(0px);
                background-color: #222;
            }

            100% {
                transform: translateZ(220px);
                background-color: #fff;
            }
        }
    </style>
</head>

<body>
    <div class="father"></div>
    <script>
        const father = document.querySelector('.father')
        let str = "";
        for (let j = 0; j <= 10; j++) {
            for (let i = 0; i <= 10; i++) {
           str += `
             <div class='son' style="width:40px;height:40px;animation-delay:${(i+j)*0.3}s;"></div>
           ` 
         }     
        }
        father.innerHTML = str;
    </script>
</body>

</html>